<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      #txt {
        border: 1px solid #DCDCDC;
        border-radius: 5px;
        padding: 7px 9px;
      }
    </style>
	</head>
	<body>
    <input type="text" id="txt">
    
    <script src="../src/colorpicker.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      let tx = document.querySelector('#txt');
      
      let cp = new colorpicker({
        // 设置指向容器选择器
        elem: '#txt',
        // 设置默认颜色
        color: '#FF0',
        // 开启预定义颜色
        predefine: true,
        // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
        colors: ['#FF0000', '#DCDCDC', '#5FB878', '#009688', '#393D49', '#FFB800', '#FF5722', '#01AAED'],
        // 设置选择器根节点的 z-index 属性
        zIndex: 1024,
        // 设置颜色显示/输出格式
        format: 'hex',
        // 设置颜色改变回调
        change: color => {
          tx.style.color = color;
          tx.style.borderColor = color;
        },
        // 设置颜色选择回调
        done: color => tx.value = color,
      });
      
      cp.render();
    </script>
	</body>
</html>
